<template>
  <div class="recover-box" v-if="loginUser.status == 1">
    <el-avatar :size="36" :src="loginUser.infor.avatar" class="recover-avatar" />
    <textarea v-model="content" class="recover-textarea" placeholder="回复一下..."></textarea>
    <el-button type="primary" class="recover-btn" @click="postReply">回复</el-button>
  </div>
  <div v-else>
    <h4>
      暂未
      <router-link
        :to="{ path: '/user-login', query: { redirect: '/show-article/' + props.articleId } }"
      >
        登录
      </router-link>
      ，无法评论
    </h4>
  </div>
</template>

<script setup lang="ts">
import { useArticleManageStore } from '@/stores/useArticleManageStore'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useCurrentUserStore } from '@/stores/useCurrentUserStore.ts'

const props = defineProps({
  articleId: {
    type: Number,
    required: true,
  },
  topId: {
    type: Number,
    required: true,
  },
})
const currentUserStore = useCurrentUserStore()
const loginUser = currentUserStore.loginUser
const content = ref('')
const articleManageStore = useArticleManageStore()
//后续解决问题，传递的文章id
const postReply = async () => {
  //提交回复
  try {
    await articleManageStore.postReply(props.articleId, content.value, props.topId)
    ElMessage.success('回复成功')
    content.value = ''
    //todo重新加载效果
  } catch (error) {
    ElMessage.error(String(error))
  }
}
</script>

<style scoped>
.recover-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 20px;
  max-width: 800px;
  width: 100%;
}

.recover-avatar {
  flex-shrink: 0;
  margin-top: 4px;
}

.recover-textarea {
  flex: 1;
  min-height: 30px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  resize: vertical;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  outline: none;
  transition: border-color 0.2s ease;
}

.recover-textarea:focus {
  border-color: #409eff;
}

.recover-btn {
  height: 36px;
  margin-top: 4px;
}
</style>
